.user-center {
    .content {
        .assets {
            margin: 16px;
            border-radius: 10px;
            background-image: linear-gradient(to right, #ff3202 , #ff7200);
            box-shadow: -1px 0px 8px #ff3402;
            .user{
                padding: 24px 24px 12px;
                display: flex;
                justify-content:flex-start;
                align-items    : center;
                .avatar {
                    width: 20%;
                    img{
                        max-width: 100%;
                        max-height: 100%;
                        border-radius:50%;
                        border:none;
                    }
                }
                .info {
                    margin-left: 16px;
                    color: #fff;
                    font-size:18px;
                }
            }
                
            &-item {
                margin: 10px 12px;
                display: flex;
                justify-content:space-around;
                text-align: center;
                border-radius: 8px;
                padding: 5px 0;
                color: #fff;
                &__panel {
                    width: 30%;
                    padding: 0 8px;
                
                    &__text {
                        font-size: 13px;
                    }
                    &__num {
                        margin-top: 3px;
                        font-size: 16px; 
                    }
                    .i-addr {
                        display: inline-block;
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                        height: 32px;
                        width: 32px;
                        background-image: url("../../assets/images/addr.png");
                      
                    }
                    .i-order {
                        display: inline-block;
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                        height: 32px;
                        width: 32px;
                        background-image: url("../../assets/images/order.png");
                    }
                }
                .text {
                    color: #B9B9B9;
                    font-size: 14px;
                }
                .num {
                    color: #333;
                    font-size: 16px; 
                }
            }
        }
        .action {
            margin: 16px;
            display: flex;
            justify-content:flex-start;
            text-align: center;
            border-radius: 8px;
            padding: 15px 0;
            background-color: #fff;
            color: #333;
            &-panel {
                width: 30%;
                padding: 0 8px;
            
                &__text {
                    font-size: 14px;
                }
                &__num {
                    margin-top: 3px;
                    font-size: 16px; 
                }
                .i-addr {
                    display: inline-block;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                    height: 32px;
                    width: 32px;
                    background-image: url("../../assets/images/addr.png");
                  
                }
                .i-order {
                    display: inline-block;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                    height: 32px;
                    width: 32px;
                    background-image: url("../../assets/images/order.png");
                }
            }
        }
        .order-panel {
            margin: 8px 16px;
            background-color: #fff;
            border-radius: 8px;
            font-size: 16px;
            &__header{
                display: flex;
                justify-content:space-between;
                align-items    : center;
                padding: 8px 16px;
                .all {
                    font-size:14px;
                    color: #666;
                }
                .all-right {
                    align-self: center;
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    border-top: 1px solid #666;
                    border-right: 1px solid #666;
                    transform: rotate(45deg);
                }
            } 
            &__list {
                display: flex;
                justify-content: space-around;
                &__item {
                    text-align:center;
                    font-size: 13px;
                    color: #333;
                    padding: 12px 0;
                    .unpay {
                        background-image: url("../images/unpay.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 32px;
                        height          : 28px;
                    }
                    .unsend {
                        background-image: url("../images/unsend.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 32px;
                        height          : 28px;
                    }
                    .unreceive {
                        background-image: url("../images/unreceive.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 32px;
                        height          : 28px;
                    }
                    .receive {
                        background-image: url("../images/receive.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 32px;
                        height          : 28px;
                    }
                }
            }
        }
        .action-list{
            margin: 8px 16px 56px;
            background-color: #fff;
            border-radius: 8px;
            font-size: 16px;
         
            &-item {
                padding:16px;
                border-bottom: 1px solid #f1eeee;
                display        : flex;
                justify-content: space-between;
                &__left {
                    display        : flex;
                    align-items: center;
                    .i-phone{
                        background-image: url("../images/i-phone.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 22px;
                        height          : 24px;
                    }
                    .i-earn {
                        background-image: url("../images/i-earn.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 22px;
                        height          : 24px;
                    }
                    .i-record{
                        background-image: url("../images/i-record.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 22px;
                        height          : 24px;
                    }
                    .i-address{
                        background-image: url("../images/i-address.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 24px;
                        height          : 24px;
                    }
                    .i-list {
                        background-image: url("../images/i-list.png");
                        background-size : 100% 100%;
                        display         : inline-block;
                        width           : 22px;
                        height          : 24px;
                    }
                    
                }
                .i-right {
                    align-self: center;
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-top: 1px solid #000;
                    border-right: 1px solid #000;
                    transform: rotate(45deg);
                }
            }
            
        }
        .user-info {
            background-color: #DE3032;
            border-radius: 0  0  32px  32px;
            padding: 10px 16px 56px;
            display: flex;
            justify-content:flex-start;
            align-items    : center;
            .avatar {
                margin-top: 16px;
                width: 25%;
                img{
                    max-width: 100%;
                    max-height: 100%;
                    border-radius:50%;
                    border:none;
                }
            }
            .info {
                margin-left: 16px;
                color: #fff;
                font-size:18px;
            }
            
        }
        .list {
            margin-top: -48px;
            &-item {
                margin: 10px 12px;
                background-color: #fff;
                display: flex;
                justify-content:space-around;
                text-align: center;
                border-radius: 8px;
                padding: 5px 0;
                &__panel {
                    width: 30%;
                    margin: 16px 0;
                    padding: 0 8px;
                
                    &__text {
                        color: #B9B9B9;
                        font-size: 14px;
                    }
                    &__num {
                        margin-top: 8px;
                        color: #333;
                        font-size: 16px; 
                    }
                    .i-addr {
                        display: inline-block;
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                        height: 32px;
                        width: 32px;
                        background-image: url("../../assets/images/addr.png");
                      
                    }
                    .i-order {
                        display: inline-block;
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                        height: 32px;
                        width: 32px;
                        background-image: url("../../assets/images/order.png");
                    }
                }
                .text {
                    color: #B9B9B9;
                    font-size: 14px;
                }
                .num {
                    margin-top: 8px;
                    color: #333;
                    font-size: 16px; 
                }
            }
        }
    }
}

/***地址列表***/
.address-contain{
    //overflow: hidden;
    .content {
        margin-left: 10px;
        position:absolute;
        width: 97%;
        height: 93%;
        background-color: #fff;
        .address-list {
            padding-top:15px;
            .addr-radio {
                display:flex;
                justify-content:space-between;
                padding:0 16px;
                align-items: center;
                .van-radio__label{
                    // width:85%;
                    display: flex;
                    align-self: center;
                    justify-content: space-between;
                }
                .radio-icon {
                    height: 24px;
                    width: 24px;
                }
                .radio-content {
                    text-align: left;
                    margin-left: 5px;
                    width: 80%;
                    &__user {
                        line-height: 16px;
                        max-height:32px;
                        color: #333333;
                        font-size: 16px;
                        font-weight: bold;
                        .phone {
                            color: #999999;
                            font-size: 14px;
                            font-weight:normal;
                        }
                        .addr-defaut{
                            margin-left: 8px;
                            font-size: 10px;
                            text-align: center;
                            padding:4px 10px 2px;
                            background-color: #fad8c5;
                            color:#f87d39;
                            border-radius: 3px;
                        }
                    }
                
                    &__detail {
                        margin-top: 6.5px;
                        display:flex;
                        font-size: 13px;
                        max-height: 20px;
                        line-height: 20px;
                        color: #333333;
                        //width: 80%;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        span{
                            display: block;
                            text-align: center;
                            padding:0 16px;
                            background-color: #fad8c5;
                            color:#f87d39;
                        }
                    }
                }
                &__edit{
                    padding: 16px 0 16px 8px;
                    border-left: 1px solid #ccc;
                    height: 13px;
                    line-height: 13px;
                    color: #333333;
                }
            }
        } 
        
        .address-add {
            margin: 15px auto;
            text-align: center;
            height: 50px;
            width:100%;
            color:#999999;
            background-color:#fff;
            img {
                background-repeat:no-repeat;
                background-size:100% 100%;
                height: 24px;
                width: 24px;
            }
        }
    }
    

}

/***地址编辑***/
.address-eidt-contain {
    .content {
        background-color: #fff;
        text-align: center;
        .btn-delete {
            margin: 15px auto;
            background-color: #DE3032;
            border: 1px solid #DE3032;
            color: #fff;
            padding: 8px 0;
            font-size: 16px;
            border-radius: 24px;
            width: 50%;
        }
    }
    .add-default {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 0;
        &-left{
            margin-left: 16px;
            color: #323233;
            font-size: 14px;
            align-self: center;
        }
        &-right{
            margin-right: 2em;
            color: #323233;
            font-size: 14px;
            align-self: center;
        }
    }
}

/***订单列表******/
.order-contain{
    .order-list-goods {
        color: #323233;
        font-size: 12px;
        box-sizing: border-box;
        background-color: #fff;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        margin-top: 16px;
    
        &__header {
            display: flex;
            padding: 8px 0;
            border-bottom: 1px solid #f1eeee;
            color:#666666;
            width: 100%;
            font-size: 14px;
            justify-content: space-between;
            .header-item{
                width: 20%;
                .title{
                    margin-right: 8px;
                }
                img{
                    width: 7px;
                    height: 12px;
                }
            }
        }
        &__contain {
            padding: 8px 0 16px 8px;
            border-bottom: 1px solid #f1eeee;
            display: flex;
        }
        &__thumb {
            width: 100px;
            height: 100px;
            //margin-right: 10px;
            //margin-left: .5em;
            margin: 0 auto;
            flex: none;
            align-items: center;
            justify-content: center;
    
            img {
                border: none;
                max-width: 100%;
                max-height: 100%;
                border-radius: 2px;
            }
        }
    
        &__content {
            height: 120px;
            width: 65%;
            min-width: 0;
            text-align: left;
            padding-left: 8px;
        }
    
        &__title{
            font-size: 14px;
            max-height: 20px;
            line-height: 20px;
            color: #333333;
        }
    
        &__desc,&__price {
            margin-top: 2px;
            line-height: 16px;
            max-height: 32px;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            word-break: break-all;
        }
        &__price {
            margin-top: 8px;
        }
    
        &__total{
            width:100%;
            margin-top: 12px;
            span{
                font-size: 14px;
                color:#333;
                &:first-child {
                    color:#999999;
                    margin-right: 3px;
                }
                &:last-child{
                    color:#e60012;
                    font-weight: bold;
                }
            }
        }
    
        &__bottom {
            padding: 16px 0;
            display: flex;
            justify-content: space-between;
            .left{
                align-self: center;
                text-align: left;
                margin-left: 16px;
                div{
                    padding: 3px 0;
                }
            }
            .right{
                align-self: center;
            }
            .button {
                margin-right: 5px;
                background-color:#ffff ;
                color: #999999;
                border:1px solid #999999;
                user-select: none;
                width: 85px;
                height: 28px;
                line-height: 25px;
                font-size: 14px;
                border-radius:32px;
            }
            .btn-red{
                color: #e60012;
                border:1px solid #e60012;
            }
        }
    
        &__origin-price {
            display: inline-block;
            margin-left: 5px;
            font-size: 10px;
            color: #7d7e80;
            text-decoration: line-through;
        }
    
        &__num {
            float: right;
        }
    
        &__tag {
            position: absolute;
            top: 2px;
            left: 0;
        }
    
        &__footer {
            text-align: right;
            flex: none;
        }
    }
}

/*****订单详情******/
.detail-contain{
    .order-detail {
        &__logistics{
            background-color: #fff;
            min-height: 64px;
            line-height: 64px;
            border-bottom: 1px solid #f1eeee;
            font-size: 14px;
            color:#333333;
        }
        &__address{
            color: #323233;
            font-size: 12px;
            padding: 32px 16px 16px 16px;
            /*padding: 1em;*/
            box-sizing: border-box;
            background-color: #fff;
            border-top: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            margin-bottom: 16px;
            .address__header{
                display: flex;
            }
            .address__i{
                margin: 1em;
                background-repeat:no-repeat;
                background-size:100% 100%;
                height: 24px;
                width: 24px;
                background-image: url("../../assets/images/local-normal.png");
            }
            .address__content{
                position: relative;
                width: 78%;
                min-width: 0;
                text-align: left;
                align-self: center;
            }
            .address__user{
                line-height: 16px;
                max-height:32px;
                color: #333333;
                font-size: 16px;
                font-weight: bold;
                .phone {
                    color: #999999;
                    font-size: 14px;
                    font-weight:normal;
                }
            }
            .address__detail{
                margin-top: 6.5px;
                margin-bottom: 16px;
                display:flex;
                font-size: 13px;
                max-height: 20px;
                line-height: 20px;
                color: #333333;
                width: 100%;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                word-break: break-all;
            }
        }
        &__goods{
            position: relative;
            color: #323233;
            font-size: 12px;
            box-sizing: border-box;
            background-color: #fff;
            border-top: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            margin-bottom: 16px;
            .goods__header{
                display: flex;
                padding: 8px 0 0 8px;
                border-bottom: 1px solid #f1eeee;
                color:#666666;
                width: 100%;
                font-size: 14px;
                justify-content: space-between;
                .header-item{
                    width: 30%;
                    .title{
                        margin-right: 0.5em;
                    }
                    img{
                        width: 7px;
                        height: 12px;
                    }
                }
            }
            .goods__contain{
                padding: 8px 0 16px 8px;
                display: flex;
                .goods__thumb{
                    width: 120px;
                    height: 120px;
                    margin: 0 auto;
                    flex: none;
                    align-items: center;
                    justify-content: center;
                    z-index: 1;
                    img {
                        border: none;
                        max-width: 100%;
                        max-height: 100%;
                        border-radius: 2px;
                    }
                }
                .goods__content{
                    position: relative;
                    height: 120px;
                    width: 65%;
                    min-width: 0;
                    text-align: left;
                    padding-left: 8px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .goods__title{
                        font-size: 14px;
                        max-height: 20px;
                        line-height: 20px;
                        color: #333333;
                    }
                    .goods__desc,.goods__price {
                        margin-top: 5px;
                        line-height: 16px;
                        max-height: 32px;
                        color: #333333;
                        font-size: 14px;
                        font-weight: bold;
                        word-break: break-all;
                    }
    
                    .goods__price{
                        color: #e60012;
                        margin-bottom: 10px;
                    }
                }
            }
        }
        &__info{
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:flex-start;
            padding: .8em 0;
            border-bottom: 1px solid #f1eeee;
            .info-item{
                text-align: center;
                margin: .5em 0 0 2em;
                font-size: 14px;
                color:#333333;
                span:last-child{
                    margin-left: 1em;
                }
            }
        }
        &__price {
            background-color: #fff;
            margin-bottom: 4em;
            .price-item{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color:#333333;
                span{
                    margin: 1em 2.5em 1em 2em;
                    align-self: center;
                }
                &:last-child{
                    padding-bottom: 1em;
                    justify-content: flex-end;
                    font-size: 16px;
                    span{
                        margin: 0 2em 0 0;
                    }
                }
                .price{
                    color: #e60012;
                }
            }
        }
        &__bottom{
            position: fixed;
            bottom: 0;
            background-color: #fff;
            width: 100%;
            padding: .8em 0;
            display: flex;
            justify-content: flex-end;
            .btn{
                border:1px solid #cccccc;
                background-color: #ffffff;
                border-radius: 2em;
                padding: .5em 1.5em;
                color:#333333;
                font-size: 14px;
                margin-right: .5em;
            }
            .btn-red{
                background-color: #e60012;
                border-color: #e60012;
                margin-right: 1em;
                color:#fff;
            }
        }
    }
}

/***物流明细****/
.logistics{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    &-item{
        display:flex;
        flex-direction: row;
        justify-content:center;
        color: #999999;
        padding: 8px 0;
        margin:  8px 0;
        .logistics-item-left{
            text-align: right;
            padding: 0 12px 0 0;
            .date{
                font-size: 14px;
                width: 88px;
                align-self: center;
            }
            .time{
                font-size: 12px;
                align-self: center;
            }
        }
        .logistics-item-right{
            text-align: left;
            padding: 0 10px;
            width: 80%;
            .status{
                font-size: 14px;
                font-weight: bold;
                align-self: center;
            }
            .content{
                font-size: 12px;
            }
        }
        .logistics-item-circle{
            .i-default{
                position: absolute;
                z-index: 2;
                display: block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #969799;
                left: 95px;
            }
            .i-active{
                display: block;
                position: absolute;
                z-index: 4;
                left: 86.5px;
                background-repeat:no-repeat;
                background-size:100% 100%;
                height: 20px;
                width: 20px;
                background-image: url("../../assets/images/i-active.png");
            }
            .i-ship{
                display: block;
                position: absolute;
                z-index: 4;
                left: 86.5px;
                background-repeat:no-repeat;
                background-size:100% 100%;
                height: 20px;
                width: 20px;
                background-image: url("../../assets/images/i-ship.png");
            }
            .i-receive{
                display: block;
                position: absolute;
                z-index: 4;
                left: 86.5px;
                background-repeat:no-repeat;
                background-size:100% 100%;
                height: 20px;
                width: 20px;
                background-image: url("../../assets/images/i-receive.png");
            }
            .i-delivery{
                display: block;
                position: absolute;
                z-index: 4;
                left: 90px;
                background-repeat:no-repeat;
                background-size:100% 100%;
                height: 20px;
                width: 20px;
                background-image: url("../../assets/images/i-delivery.png");
            }
        }
        .logistics-item__line{
            content: '';
            position: absolute;
            width: 1px;
            background-color: #999999;
            top: 32px;
            left:96px;
            bottom:88px;
            z-index: 1;
        }
    }
    .active{
        color: #333333;
    }
}

.share-contain {
    font-size: 16px;
    .title {
        margin: 16px;
        text-align: center;
    }
    .qr-panel{
        background-color: #fff;
        margin: 16px 32px;
        text-align:center;
        padding: 16px 32px;
       
        img{
            width: 100%;
            margin: 8px 0;
        }
        .qr-text {
            color: #333;
            font-size: 14px;
        }
    }
}

/***邀请记录***/
.invite-list {
    background-color:#efefef;
    &-item {
        padding: 16px 0 8px;
        font-size:16px;
        display        : flex;
        justify-content: flex-start;
        align-items    : center;
        border-bottom: 1px solid #c0c0c0;
        margin: 0 16px;
        .avatar {
            width:15%;
            img{
                max-width: 100%;
                max-height: 100%;
            }
        }
        .info {
            margin-left: 24px;
            .name {
                color: #333;
            }
            .time {
                font-size: 14px;
            }
        }
    }
}
img[lazy=loading] {
    width:32px;
    height:32px;
    text-align: center;
    margin: 20% auto;
    vertical-align: middle;
}

